<%@page import="org.shop.entity.security.MyUserDetail" %>
<%@page import="org.shop.util.ObjUtil" %>
<%@page import="org.springframework.security.core.context.SecurityContextImpl" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";


    SecurityContextImpl securityContextImpl = (SecurityContextImpl) request.getSession().getAttribute("SPRING_SECURITY_CONTEXT");
    MyUserDetail ud = null;
    Byte state = 1;
    if (ObjUtil.isNotNullAndEmpty(securityContextImpl)) {
        ud = (MyUserDetail) securityContextImpl.getAuthentication().getPrincipal();
        state = ud.getState();
    }
%>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1 user-scalable=0">
    <title>问答详情</title>
    <link rel="stylesheet" href="<%=basePath%>assets/css/public.css">
    <link rel="stylesheet" href="<%=basePath%>assets/css/page.css">
    <link rel="stylesheet" href="<%=basePath%>assets/font-awesome-4.7.0/css/font-awesome.min.css">
    <script src="<%=basePath%>assets/js/jquery-1.8.3.min.js"></script>
    <script src="<%=basePath%>assets/js/fontSize.js"></script>
    <link href="<%=basePath%>/assets/layer/mobile/need/layer.css" rel="stylesheet" type="text/css">
    <script src="<%=basePath%>/assets/layer/mobile/layer.js"></script>
    <style>
        body {
            padding-top: 0.85rem;
            padding-bottom: 1.6rem;
            background-color: #F3F1F1;
        }

        .header_ul li {
            float: left;
            width: 25%;
        }

        .header_ul li a {
            font-size: 0.28rem;
            height: 0.75rem;
            line-height: 0.8rem;
            padding: 0 0.2rem;
            display: inline-block;
        }

        .header_ul li a.active {
            color: #FF3D20;
            border-bottom: 2px solid #FF3D20;
        }

        .answer_info {
            padding: 0.2rem;
        }

        .photo {
            width: 0.8rem;
        }

        .header_top .photo img {
            width: 0.6rem;
            height: 0.6rem;
            border-radius: 50%;
        }

        .photo img {
            width: 0.7rem;
            height: 0.7rem;
            border-radius: 50%;
        }

        .name {
            font-size: 0.26rem;
        }

        .info {
            line-height: 0.36rem;
            margin-top: 0.02rem;
            font-size: 0.26rem;
        }

        .time {
            color: #989898;
            font-size: 0.24rem;
        }

        .focus_switch {
            padding: 0.06rem 0.1rem;
            font-size: 0.24rem;
            margin-top: 0.1rem;
            line-height: 0.4rem;
            border-radius: 0.4rem;
            margin-right: 0.2rem;
        }
        .focus{
            background-color: #FF3F25;
            color: #fff;
        }

        .already_focus{
            background-color: #F3F1F1;
            color: #333;
        }
        .answer_amount i {
            font-size: 0.26rem;
        }

        .answer_detail {
            font-size: 0.28rem;
            margin: 0.2rem 0 0.1rem 0.8rem;
        }

        .operation {
            line-height: 0.8rem;
            text-align: right;
            font-size: 0.26rem;
            margin-top: 0.2rem;
        }

        .operation_btn {
            padding: 0.1rem;
            position: relative;
            margin-left: 0.1rem;
        }

        .operation_btn i {
            width: 0.4rem;
            height: 0.4rem;
            display: inline-block;
            position: absolute;
            top: 0.04rem;
            background-size: cover;
            margin-right: 0.06rem;
        }

        .operation_btn span {
            margin-left: 0.5rem;
        }

        .favorite_o {
            background-image: url("<%=basePath%>assets/images/favorite.png");
        }

        .active_favorite {
            background-image: url("<%=basePath%>assets/images/active_favorite.png");
        }

        .info_img {
            background-image: url("<%=basePath%>assets/images/info_img.png");
        }

        .header_top {
            padding-left: 0.8rem;
        }

        .header_top .photo img {
            margin-top: 0.1rem;
        }

        .header_top .name {
            font-size: 0.3rem;
            margin-left: 0.1rem;
        }

        .question {
            padding: 0.2rem;
            background-color: #fff;
        }

        .answer_list {
            background-color: #fff;
        }

        .question p {
            font-size: 0.28rem;
            line-height: 0.6rem;
        }

        .answer_for {
            color: #999999;
        }
        .reply_area {
            position: fixed;
            bottom: 0;
            left: 0;
            height: 0.8rem;
            line-height: 0.8rem;
            background-color: #fff;
            width: 100%;
        }

        .reply_photo {
            width: 1rem;
            margin-left: -100%;
            float: left;
        }

        .reply_photo img {
            width: 0.6rem;
            height: 0.6rem;
            margin: 0.1rem;
            border-radius: 50%;
        }

        .reply_input {
            width: 100%;
            float: left;
        }

        .reply_input input {
            width: 100%;
            border: 1px solid #EAEAEA;
            height: 0.5rem;
            background-color: #EEEEEE;
            outline: none;
            text-indent: 0.2rem;
        }

        .reply_btn {
            width: 1rem;
            background-color: #fff;
            border: none;
            outline: none;
            line-height: 0.8rem;
            margin-left: -1rem;
            float: left;
        }
        .inside_div{
            margin:0 1rem;
        }
    </style>
</head>
<body>
<input id="basePath" type="hidden" value="<%=basePath%>">
<input id="questionId" type="hidden" value="${questionDetails.questionId}">
<input id="userPhoto" type="hidden" value="${userInfo.userPhoto}">
<input id="userId" type="hidden" value="${userInfo.userId}">
<div class="header">
    <div class='header_top'>
        <a class="returnInfo" href="#" onclick="javascript:history.go(-1);"><i class="fa fa-angle-left"></i></a>
        <div class="photo float_l">
            <img src="<%=basePath%>app/getGoodsPhotoByName?goodsImage=${userInfo.userPhoto}" alt="">
        </div>
        <div class="name float_l">
            ${userInfo.userName}
        </div>
        <div class="focus float_r focus_switch">
            + 关注
        </div>
    </div>
</div>
<div class="question border-bottom-8">
    <p>
        ${questionDetails.content}
    </p>
    <span class="time">${questionDetails.createDate}</span>
</div>
<div class="answer_list">

</div>
<div class="reply_area">
    <div class="reply_input">
        <div class="inside_div">
            <input id="content" type="text" placeholder="评论一下吧~">
        </div>
    </div>
    <div class="reply_photo">
        <img src="<%=basePath%>/app/getGoodsPhotoByName?goodsImage=${userInfo.userPhoto}" alt="">
    </div>
    <button class="reply_btn">发表</button>
</div>
</body>
<script>
    //滚动加载
    var geting = false;//是否加载信息，默认为false
    var currentPage = 1;//当前页
    var pageSize = 10;//每页数据数
    var senderId = "";
    var sendName = "";
    $(function () {

        $(".header_ul a").click(function () {
            $(".header_ul a").removeClass("active");
            $(this).addClass("active");
        });
        $(".favorite").click(function () {
            $(this).find("i").toggleClass("favorite_o");
            $(this).find("i").toggleClass("active_favorite")
        });

        getData();

        $(window).scroll(function () {
            if (geting) {
                return;
            }
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();
            if (scrollTop + windowHeight == scrollHeight) {
                currentPage++;
                getData();
            }
        });

    });

    //获取所有评论
    function getData() {
        var questionId = $("#questionId").val();
        geting = true;
        $.ajax({
            url: "<%=basePath%>app/getQuestionAnswerList",
            async: false,
            dataType: "json",
            type: "post",
            data: {
                "questionId": questionId,
                "currentPage": currentPage,
                "pageSize": pageSize
            },
            success: function (data) {
                $.each(data, function (i, item) {
                    var html = '<div class="answer_info border-bottom-1">' +
                        '<div class="clearFirx">' +
                        '<div class="photo float_l">' +
                        '<img src="<%=basePath%>app/getGoodsPhotoByName?goodsImage=' + item.sendHeadImg + '" alt="">' +
                        '</div>' +
                        '<div class="info float_l">' +
                        '<span class="name">' + item.sendName + '</span><br>' +
                        '<span class="time">' + item.createDate + '</span>' +
                        '</div>' +
                        '<div class="operation float_r">' +
                        '<span class="operation_btn favorite">'
                    if (<%=state%> == 1 && item.state == 1
                    )
                    {
                        html += '<i class="fa active_favorite"></i>'
                    }
                    else
                    {
                        html += '<i class="fa favorite_o"></i>'
                    }
                    html += '<span>' + item.praiseCount + '</span>' +
                        '</span>' +
                        '<input name="' + item.questionAnswerId + '" type="hidden" value="' + item.questionAnswerId + '">' +
                        '</div>' +
                        '</div>'
                    if (item.receiverId == "" || item.receiverId == null) {
                        html += '<div class="answer_detail" onclick="reply($(this),' + item.questionAnswerId + ',' + item.senderId + ',\'' + item.sendName + '\')">' + item.content + '</div>'
                    } else {
                        html += '<div class="answer_detail" onclick="reply($(this),' + item.questionAnswerId + ',' + item.senderId + ',\'' + item.sendName + '\')">回复@' + item.receiverName + '' + item.content + '</div>'

                    }
                    html += '</div>'
                    $(".answer_list").append(html);
                    geting = false;
                })
            },
            error: function (data) {
                layer.open({
                    content: '网络错误~'
                    , skin: 'msg'
                    , time: 3 //3秒后自动关闭
                });
            }
        })
    };

    $(".focus_switch").click(function(){
        $(this).toggleClass("focus already_focus");
        if($(this).hasClass("already_focus")){
            $(this).text("已关注")
        }else{
            $(this).text("+ 关注")
        }
    });

   //发表评论
   $(".reply_btn").click(function () {
    	var questionId = $("#questionId").val();
    	var userPhoto = $("#userPhoto").val();
    	var imgStr = "<%=basePath%>app/getGoodsPhotoByName?goodsImage="+userPhoto;
        if("<%=securityContextImpl%>" == "null"){
            window.location.href = "<%=basePath%>app/appLogin2";
            return;
        }
        if($("#content").val() == ""){
            layer.open({
                content: '请输入内容'
                ,skin: 'msg'
                ,time: 3 //3秒后自动关闭
            })
            return false;
        }
        var datas = "";
        var contentStr="";
        if(senderId == ""){
            datas = {
                "content":$("#content").val(),
                "questionId":questionId
            }
            contentStr = $("#content").val();
        }else{
            datas = {
                "content":$("#content").val(),
                "questionId":questionId,
                "receiverId":senderId,
                "receiverName":sendName
            }
            contentStr = '回复@'+sendName+":"+$("#content").val();
        }
        $.ajax({
            url: "<%=basePath%>app/addQuestionReply",
            async:false,
            type: 'post',
            data: datas,
            dataType: 'json',
            success: function (data) {
                if(data.state==1){
                    layer.open({
                        content: '留言成功~'
                        ,skin: 'msg'
                        ,time: 3 //3秒后自动关闭
                    })

                    var html = '<div class="answer_info border-bottom-1">'+
                        '<div class="clearFirx">'+
                        '<div class="photo float_l">'+
                        '<img src="'+imgStr+'" alt="">'+
                        '</div>'+
                        '<div class="info float_l">'+
                        '<span class="name">${userInfo.userName}</span><br>'+
                        '<span class="time">刚刚</span>'+
                        '</div>'+
                        '<div class="operation float_r">'+
                        '<span class="operation_btn praise">'+
                        '<i class="favorite_o"></i>'+
                        '<span>0</span>'+
                        '</span>'+
//		                            '<input name="'+item.activityAnswerId+'" type="hidden" value="'+item.activityAnswerId+'">'+
                        '</div>'+
                        '</div>'+
                        '<div class="answer_detail">'+contentStr+'</div>'+
                        '</div>'
                    $(".answer_list").append(html);
                    $('#content').val("");
                    $('#content').attr('placeholder',"评论一下吧~");
                    senderId = "";
                    sendName = "";
                }else{
                    layer.open({
                        content: '留言失败~',
                        skin: 'msg',
                        time: 3 //3秒后自动关闭
                    })
                }
            },error:function (){
                layer.open({
                    content: '网络出现了异常，请稍等~'
                    ,skin: 'msg'
                    ,time: 3 //3秒后自动关闭
                })
            }
        })
    });
    
 //删除
   function reply(obj,aId,sId,sName){
   	   var userId = $("#userId").val();
//    	   questionAnswerId = aId;
       senderId = sId;
       sendName = sName;
       if("<%=securityContextImpl%>" == "null"){
           window.location.href = "<%=basePath%>app/appLogin2";
           return;
       }
       if(userId == senderId){
           //询问框
           layer.open({
               content: '确认删除该评论吗？',
               btn: ['确定', '取消'],
               yes: function(index){
                   obj.parent().remove();
                   $.ajax({
                       url: "<%=basePath%>app/delQuestionAnswer",
                       timeout: 300000,
                       dataType: "json",
                       type: "post",
                       data: {
                           "questionAnswerId":aId
                       },success : function(data) {
                           layer.open({
                               content: '删除成功~',
                               skin: 'msg',
                               time: 3 //3秒后自动关闭
                           })
                       },error : function() {
                           layer.open({
                               content: '网络异常,请稍后再试~'
                               ,skin: 'msg'
                               ,time: 3 //3秒后自动关闭
                           })
                       }
                   })
               }
           })
       }else{
           $("#content").focus();
           $('#content').attr('placeholder',"回复:"+sName);
       }
   };
    
</script>
</html>
